<template>
	<VantNav title="注册" />
	
	<div class="reg">
		<van-form @submit="onSubmit">
		  <van-cell-group inset>
			<van-field
			    v-model.trim="name"
			    name="name"
			    label="姓名"
			    placeholder="姓名"
			  />
		    <van-field
		      v-model.trim="tel"
		      name="tel"
		      label="手机号"
		      placeholder="手机号"
		    />
		    <van-field
		      v-model.trim="password"
		      type="password"
		      name="password"
		      label="密码"
		      placeholder="密码"
		    />
			<van-field
			  v-model.trim="password2"
			  type="password"
			  label="确认密码"
			  placeholder="确认密码"
			/>
			<van-field
			    v-model.trim="clazz"
			    name="className"
			    label="班级"
			    placeholder="班级"
			  />
			  
			  <van-field name="role" label="角色">
				<template #input>
				  <van-radio-group v-model="role" direction="horizontal">
					<van-radio :name="1">学生</van-radio>
					<van-radio :name="2">教师</van-radio>
				  </van-radio-group>
				</template>
			  </van-field>
		  </van-cell-group>
		  
		 
		  
		  <div style="margin: 16px;">
		    <van-button round block type="primary" native-type="submit">提交</van-button>
		  </div>
		  
		  <van-divider content-position="right">
			  <a @click="$router.push({name: 'login'})">已有账号，立即登录</a>
		  </van-divider>
		  
		</van-form>
	</div>
</template>

<script>
import VantNav from "@/components/VantNav.vue"

export default {
	components: {
		VantNav ,
	},
	data() {
		return {
			tel: "" ,
			password: "", 
			role: 1, 
			password2: "",
			clazz: "",
			name: "",
		}
	},
	methods: {
		onSubmit(data) {
			if (this.name === "") {
				this.$layer.msg("姓名不允许为空", {offset: '100px'})
				return ;
			}
			if (this.tel === "") {
				// 进行友好提示
				this.$layer.msg("手机号不允许为空", {offset: '160px'})
				return ;
			}
			if (!/^1[3-9]\d{9}$/.test(this.tel)) {
				this.$layer.msg("手机号格式不正确", {offset: '160px'})
				return ;
			}
			if (this.password === "") {
				this.$layer.msg("密码不允许为空", {offset: '220px'})
				return ;
			}
			if (this.password !== this.password2) {
				this.$layer.msg("两次输入的密码不一致", {offset: '280px'})
				return ;
			}
			if (this.clazz === "") {
				this.$layer.msg("班级名不允许为空", {offset: '320px'})
				return ;
			}
			
		}
	}
}

</script>

<style scoped>
.reg {
	margin-top: 50px;
}
</style>